<template>
	<!-- 待回收 -->
	<view class="treat-box">
		<view class="tabs-box">
			<up-tabs :list="tabList" @click="tabsClick" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle"
				:itemStyle="itemStyle" lineColor="#3296FA"></up-tabs>
		</view>
		<scroll-view scroll-y="true" style="height: 80vh;margin-top: 20rpx;" @scrolltolower="scrolltolower">
			<view class="zfb-list">
				<view class="zfb-item" v-for="(item,index) in listData" :key="index">
					<view class="item-top">
						<view class="top-left">
							<text>订单编号：</text>
							<text>{{item.sn}}</text>
						</view>
					</view>
					<view class="item-desc">
						<text class="desc-name">驿站名称：</text>
						<text class="desc-value">{{item.st_name}}</text>
					</view>
					<view class="item-desc">
						<text class="desc-name">下单时间：</text>
						<text class="desc-value">{{item.createtime}}</text>
					</view>
					<view class="item-desc" v-if="item.status==3">
						<text class="desc-name">取消时间：</text>
						<text class="desc-value">{{item.shtime}}</text>
					</view>
					<view class="item-desc">
						<text class="desc-name">预估重量：</text>
						<text class="desc-value">{{item.weight||0}}kg</text>
					</view>
					<view class="item-desc" v-if="item.status==1">
						<text class="desc-name">实际重量：</text>
						<text class="desc-value">{{item.sj_weight||0}}kg</text>
					</view>
					<view class="item-bottom" v-if="item.status==2">
						<view class="bottom-desc" @click="btnClick(item)">
							<up-button type="default" color="#3296FA">待审核</up-button>
						</view>
					</view>
				</view>
				<up-loadmore :status="status" />
			</view>
		</scroll-view>
		<view class="inventory-fixed" v-if="statusNum==2">
			<view class="inventory-btn">
				<up-button type="default" color="#3296FA" @click="orderClick" class="btn-tj">
					<view>提交</view>
					<view>（库存：{{userInfoData.inventory||0.00}}KG提交转运）</view>
				</up-button>
			</view>
		</view>
		<up-popup :show="weightShow" mode="center" :round="10" closeable @close="closePopup">
			<view class="weight-box">
				<view class="weight-input">
					<up-input placeholder="请输入实际重量" border="none" type="digit" v-model="weightValue"></up-input>
					<text>kg</text>
				</view>
				<view class="weight-text">
					注意：同意需要填写实际重量，拒绝不需要填写！
				</view>
				<view class="weight-btn">
					<view class="btn-common" @click="aggressClick(1)">
						<up-button type="default" text="拒绝"></up-button>
					</view>
					<view class="btn-common" @click="aggressClick(2)">
						<up-button type="default" color="#3296FA" text="同意"></up-button>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeMount
	} from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import {
		getCheckList,
		getCheckOrder,
		getCheckOrderOut,
		getOrderStoreCreate,
		getUserIndex
	} from '@/api/zfb.js'
	// tabs样式
	const itemStyle = ref({
		'padding-left': '15px',
		'padding-right': '15px',
		'height': '34px',
		'background': 'transparent'
	})
	const inactiveStyle = ref({
		'color': '#171717',
		'fontWeight': 'bold',
		'transform': 'scale(1)'
	})
	const activeStyle = ref({
		'color': '#3296FA',
		'fontWeight': 'bold',
		'transform': 'scale(1.05)'
	})
	// 获取个人信息
	const userInfoData = ref({})
	const getUserInfo = async () => {
		const res = await getUserIndex()
		userInfoData.value = JSON.parse(res.user_info)
		console.log(userInfoData.value, '个人信息');
	}
	// tabs切换
	const tabList = ref([{
			id: 1,
			name: '待审核'
		},
		{
			id: 2,
			name: '已审核'
		},
		{
			id: 3,
			name: '已取消'
		},
		{
			id: 4,
			name: '已转运'
		}
	])
	// 加载更多
	const status = ref('nomore');
	onMounted(() => {
		getList()

	})
	const listData = ref([])
	const statusNum = ref(1)
	// 待回收列表
	const getList = async () => {
		const res = await getCheckList({
			status: statusNum.value
		})
		if (res.code != 200) {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			return
		}
		listData.value = res.data
	}
	// 切换tabs
	const tabsClick = (item) => {
		console.log(item);
		statusNum.value = item.id
		getList()
		getUserInfo()
	}
	// 滚动
	const scrolltolower = () => {}
	// 点击待审核
	const weightShow = ref(false)
	const weightValue = ref('') //实际重量
	const itemData = ref({})
	// 点击待审核
	const btnClick = async (item) => {
		weightShow.value = true
		itemData.value = item
	}
	// 关闭弹窗
	const closePopup = () => {
		weightShow.value = false
		weightValue.value = ''
	}
	// 点击同意或拒绝
	const aggressClick = async (number) => {
		if (number == 1) {
			// 拒绝
			const res = await getCheckOrderOut({
				id: itemData.value.id
			})
			if (res.code != 200) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				return
			}
			uni.showToast({
				title: res.message,
				icon: 'none',
				duration: 5000
			})
			getList()
		} else {
			// 同意
			if (!weightValue.value) return
			const res = await getCheckOrder({
				sj_weight: weightValue.value,
				id: itemData.value.id
			})
			if (res.code != 200) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				return
			}
			uni.showToast({
				title: '审核成功',
				icon: 'none',
				duration: 5000
			})
			getList()
		}
		closePopup()
	}
	// 呼叫运力
	const orderClick = async () => {
		const res = await getOrderStoreCreate()
		console.log(123465);
		if (res.code != 200) {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			return
		}
		uni.showToast({
			title: res.message,
			icon: 'none'
		})
		setTimeout(() => {
			getList()
		}, 300)
	}
	// 暴露给父组件
	defineExpose({
		getList,
	});
</script>

<style lang="scss" scoped>
	.treat-box {
		.tabs-box {
			background-color: #FFFFFF;
			padding: 10rpx 0;
		}

		.zfb-list {
			padding: 30rpx;

			.zfb-item {
				background-color: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15rpx;
				}

				.item-desc,
				.item-bottom {
					display: flex;
					align-items: center;
					margin: 15rpx 0;

					.desc-name {
						color: #666;
					}

					.desc-value {
						color: #171717;
					}
				}

				.item-bottom {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-bottom: 0;

					.bottom-desc {
						width: 220rpx;
					}
				}
			}
		}
	}

	.weight-box {
		padding: 50rpx 30rpx 40rpx;

		.weight-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 622rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 2rpx solid #4AAA00;
			padding: 0 18rpx;
			box-sizing: border-box;
			margin-top: 32rpx;

			text {
				font-size: 28rpx;
				color: #9CA3AF;
			}
		}

		.weight-text {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #fa3534;
		}

		.weight-btn {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			.btn-common {
				width: 220rpx;
			}
		}
	}

	.inventory-fixed {
		position: absolute;
		bottom: 0;
		width: 100%;

		.inventory-btn {
			background-color: #ffffff;
			padding: 30rpx;

			.btn-sj {
				display: flex;
				flex-direction: column;
				padding: 10rpx 0;
			}
		}
	}
</style>